<template>
  <div class="user-avator-dropdown">
    <Dropdown @on-click="handleClick">
      <Badge :dot="!!messageUnreadCount">
        <Avatar :src="userAvator" />
      </Badge>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <!-- <DropdownItem name="message">
          消息中心<Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>
        </DropdownItem>-->
        <DropdownItem name="updatePwd">修改密码</DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <Modal :mask-closable="false" v-model="modalPwd" title="修改密码">
      <Form
        ref="formCustom"
        :model="formCustom"
        :rules="formRules"
        :label-width="100"
        class="form-class"
      >
        <FormItem label="旧密码：" prop="oldPass">
          <Input type="password" v-model="formCustom.oldPass" placeholder="请输入旧密码" />
        </FormItem>
        <FormItem label="新密码：" prop="newPass">
          <Input type="password" v-model="formCustom.newPass" placeholder="请输入新密码" />
        </FormItem>
        <FormItem label="确认密码：" prop="newPass2">
          <Input type="password" v-model="formCustom.newPass2" placeholder="请再次输入新密码" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary"  @click="okBtn()">确定</Button>
        <Button @click="cancelBtn()">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import "./user.less";
import { mapActions, mapMutations } from "vuex";
import { updatePwd } from "@/api/storeUser";
import { clearLocalStorage } from "@/libs/login";
// import md5 from 'js-md5';
export default {
  name: "User",
  props: {
    userAvator: {
      type: String,
      default: ""
    },
    messageUnreadCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    const validatelOldPassword = (rule, value, callback) => {
      let nowPass = localStorage.getItem("password");
      if (value === "") {
        callback(new Error("旧密码不能为空"));
      } else if (value !== nowPass) {
        callback(new Error("旧密码不正确"));
      } else {
        callback();
      }
    };
    const validatelLinkPassword = (rule, value, callback) => {
      let linkPassword = this.formCustom.newPass;
      if (value === "") {
        callback(new Error("确认密码不能为空"));
      } else if (value !== linkPassword) {
        callback(new Error("密码不一致"));
      } else {
        callback();
      }
    };
    return {
      modalPwd: false,
      formCustom: {
        oldPass: "",
        newPass: "",
        newPass2: ""
      },
      formRules: {
        oldPass: [
          { required: true, validator: validatelOldPassword, trigger: "blur" }
        ],
        newPass: [
          { required: true, message: "新密码不能为空", trigger: "blur" }
        ],
        newPass2: [
          { required: true, validator: validatelLinkPassword, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    ...mapMutations(["setTagNavList"]),
    ...mapActions(["handleLogOut", "getMenuList"]),
    logout() {
      this.handleLogOut().then(() => {
        // 清除登录缓存数据
        clearLocalStorage();
        this.$router.push({
          name: "login"
        });
      });
    },
    message() {
      this.$router.push({
        name: "message_page"
      });
    },
    handleClick(name) {
      switch (name) {
        case "updatePwd":
          this.updatePwd();
          break;
        case "logout":
          this.logout();
          break;
        case "message":
          this.message();
          break;
      }
    },
    updatePwd() {
      this.$refs["formCustom"].resetFields();
      this.modalPwd = true;
    },
    okBtn() {
      this.$refs["formCustom"].validate(valid => {
        if (valid) {
          this.updateUserPwd();
        }
      });
    },
    cancelBtn() {
      this.modalPwd = false;
    },
    async updateUserPwd() {
      let userId = this.$store.state.user.userId; // 用户id
      let newPass = this.formCustom.newPass; // 新密码
      const item = {
        id: userId,
        password: newPass
      };
      const { data, status } = await updatePwd(item);
      if (data.code == 200 && status == 200) {
        // this.$store.state.user.password = md5(newPass);
        this.modalPwd = false;
        this.$Message.success("修改成功！");
        this.logout();
      } else {
        this.$Message.error(data.message);
      }
    }
  }
};
</script>
